<!--
 * @Author: tian_biao
 * @Date: 2021-08-05 09:57:04
 * @LastEditTime: 2021-08-09 14:29:49
 * @Description: 我的
-->
<template>
    <article class="bg_4dbfae">
        <div class="userInfo">
            <img src="../../images/minePohto.png" class="headPhoto"></img>
            <div class="headPhoto mt">
                <span class="userName">张爱国</span>
                <div class="org"><img src="../../images/myorg.png" alt="" srcset=""><span class="orgText">变电运维一班</span>
                </div>
            </div>
        </div>
        <div class="clearBox">
            <div class="clear" @click="clear">
                <img class="clearImg" src="../../images/clear.png" alt="" srcset="">
                <div class="textLh">清除缓存</div>
            </div>
            <div class="version">
                <div class="versionBox"><img class="clearImg" src="../../images/currenV.png" alt="" srcset="">
                    <div class="textLh">当前版本</div>
                </div>
                <div class="textLh">V1.0.1</div>
            </div>
        </div>
        <div class="backBox">
            <div class="clear">
                <img class="clearImg" src="../../images/back.png" alt="" srcset="">
                <div class="textLh">退出登录</div>
            </div>
        </div>
        <van-overlay :show="show" @click="show = false">
            <div class="wrapper" @click.stop>
                <div class="block">
                    <img src="../../images/clearCg.png" alt="" srcset="">
                    <div>清除缓存成功</div>
                </div>
            </div>
        </van-overlay>
        <Tabbar></Tabbar>
    </article>
</template>

<script type="text/javascript">
    import Tabbar from '@/components/tabbar'
    export default {
        name: 'mine',
        components:{
            Tabbar
        },
        data() {
            return {
                show: false
            }
        },

        computed: {

        },

        methods: {
            clear() {
                this.show = true
                setTimeout(() => {
                    this.show = false
                }, 2000);
            }
        },

        watch: {

        },
        mounted() {

        },
        created() {
            console.log(1111);
        },

    }
</script>

<style scoped>
    article {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }

    .userInfo {
        width: 100vw;
        height: 10%;
        border-bottom: 0.01rem solid #d3d0d0;
        background-color: #fff;
        padding-top: 2rem;
        display: flex;
    }

    .clearBox {
        width: 100vw;
        height: 10%;
        background-color: #fff;
        padding-top: 2rem;
        border-bottom: none;
    }

    .backBox {
        width: 100%;
        margin: 0 auto;
        height: 8%;
        background: #FFFFFF;
        box-shadow: 0px 0px 1px 0px #999999;
        margin-top: 1rem;
        border-bottom: none;
        display: flex;
        align-items: center;
    }

    .backBox:active {
        color: #0EB295;
        background: #a2f0e4;
    }

    .headPhoto {
        width: 4rem;
        height: 4rem;
        margin-left: 5%;
        border-radius: 50%;
    }

    .userName {
        color: #333333;
        font-family: Source Han Sans CN;
        font-weight: medium;
        font-size: 17px;
        line-height: normal;
        letter-spacing: 0px;
        text-align: center;
    }

    .mt {
        margin-top: 1%;
    }

    .org {
        width: 9rem;
        border-radius: 40px;
        background: #a2f0e4;
        display: flex;
        margin-top: 0.5rem;
    }

    .org>img {
        width: 1.5rem;
        height: 1.5rem;
    }

    .orgText {
        font-size: 14px;
        margin-left: 0.5rem;
        line-height: 1.5rem;
    }

    .clear {
        width: 95%;
        height: 40px;
        margin: 0 auto;
        display: flex;
        align-items: center;
    }

    .clear:active {
        color: #0EB295;
        background: #a2f0e4;
    }

    .textLh {
        line-height: 2rem;
    }

    .clearImg {
        width: 2rem;
        height: 2rem;
    }

    .version {
        width: 95%;
        height: 40px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .version:active {
        color: #0EB295;
        background: #a2f0e4;
    }

    .versionBox {
        display: flex;
    }

    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .block {
        width: 10.5rem;
        height: 5.6rem;
        border-radius: 4px;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .block>img {
        width: 1.5rem;
    }

    .block>div {
        margin-left: 0.5rem;
    }
</style>